<template>
  <div class="lyrcis">
    <div class="Lyrics-interface">
      <div class="box-box">
        <div class="Lyrics-interface-top-box">
          <div
            class="Lyrics-interface-lyrice"
            :class="isPlay ? 'playing' : 'paused'"
          >
            <div class="Lyrics-interface-bg">
              <img
                class="Lyrics-interface-img"
                :src="$utils.getImgUrl(ResourceSwitchingImg(), 220, 220)"
                alt
              />
            </div>
            <div class="Lyrics-interface-bg-write"></div>
            <div class="hand-wrapper">
              <img
                src=""
                alt
                class="hand-icon"
              />
              <img
                src="https://ssh-music.vercel.app/img/play-bar.e5a7a142.png"
                class="bar-icon"
                alt
              />
            </div>
            <!-- <button @click="changePlayState">123</button> -->
          </div>
          <div class="Lyrics-interface-lyrice-list">
            <div class="Lyrics-interface-lyrice-box">
              <p class="Lyrics-interface-lyrice-songs">
                {{ this.currentSong.name }}
                <i>MV</i>
              </p>
              <p class="Lyrics-interface-lyrice-sigers">
                <span>歌手：</span>{{ getName(ResourceSwitchingName()) }}
              </p>
            </div>
            <div class="Lyrics-interface-lyrice-lists">
              <div class="lyric-text">
                <ul class="content">
                  <li
                    v-for="(item, index) of lyric"
                    :key="index"
                    :class="currentLyricIndex === index ? 'active' : ''"
                    class="lyric-item"
                    ref="lyricItems"
                  >
                    <p
                      v-for="(con, index) of item.content.split('__')"
                      :key="index"
                    >
                      {{ con }}
                    </p>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div class="Lyrics-interface-comment">
          <!-- 歌词界面的评论列表 -->
          <li class="Playlistdateil-Content-pinglun-item">
            <div class="Playlistdateil-Content-splendid-comments">
              <p v-show="hotComments">精彩评论</p>
              <div class="Playlistdateil-Content-splendid-comments-wramp">
                <ul>
                  <li v-for="items of hotComments" :key="items.id">
                    <div class="new-comments-img">
                      <img
                        :src="$utils.getImgUrl(items.user.avatarUrl, 40, 40)"
                        alt
                      />
                    </div>

                    <div class="new-comments-text">
                      <p>
                        <span class="new-comments-text-address-name">{{
                          items.user.nickname
                        }}</span>
                        <span>{{ items.content }}</span>
                      </p>

                      <p class="Replyto-comment" v-if="items.beReplied.length">
                        <span class="text-Replyto-comment-address-name">{{
                          items.beReplied.length &&
                          items.beReplied[0].user.nickname
                        }}</span>
                        <span>{{
                          items.beReplied.length && items.beReplied[0].content
                        }}</span>
                      </p>

                      <div class="new-comments-text-create-time">
                        <span class="create-times">{{
                          getplayListCreateTime(
                            items.time,
                            "yyyy-mm-dd HH:MM:ss"
                          )
                        }}</span>
                        <span class="Thumb-up">
                          <i class="iconfont icon-component icon-good">{{
                            items.likedCount
                          }}</i>
                        </span>
                      </div>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
            <div class="Playlistdateil-Content-new-comments">
              <p>最新评论</p>
              <div class="Playlistdateil-Content-splendid-comments-wramp">
                <ul>
                  <li v-for="newItem of Comment" :key="newItem.id">
                    <div class="new-comments-img">
                      <img
                        :src="$utils.getImgUrl(newItem.user.avatarUrl, 40, 40)"
                        alt
                      />
                    </div>

                    <div class="new-comments-text">
                      <p>
                        <span class="new-comments-text-address-name">{{
                          newItem.user.nickname + ":"
                        }}</span>
                        <span>{{ newItem.content }}</span>
                      </p>
                      <!-- v-if="newitem.beReplied.lenght!==0 " -->
                      <p
                        class="Replyto-comment"
                        v-if="newItem.beReplied.length"
                      >
                        <span class="text-Replyto-comment-address-name">{{
                          newItem.beReplied.length &&
                          newItem.beReplied[0].user.nickname
                        }}</span>
                        <span>{{
                          newItem.beReplied.length &&
                          newItem.beReplied[0].content
                        }}</span>
                      </p>
                      <div class="new-comments-text-create-time">
                        <span class="create-times">{{
                          getplayListCreateTime(
                            newItem.time,
                            "yyyy-mm-dd HH:MM:ss"
                          )
                        }}</span>
                        <span class="Thumb-up">
                          <i class="iconfont icon-component icon-good">{{
                            newItem.likedCount
                          }}</i>
                        </span>
                      </div>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </li>
        </div>
        <div class="paginate">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="Total"
            :page-size="20"
            @current-change="change"
          ></el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { fetchLyric, fetchPlayLyricsComment } from "../api";
import { mapState, mapMutations } from "vuex";
import dateFormat from "dateformat";
/////////////////////////////////////////
import BetterScroll from "better-scroll";

export default {
  data() {
    return {
      //评论列表
      hotComments: [],
      Comment: [],
      //页码
      Total: 0,
      page: 1,
      //存放当前数组id
      ArrId: [],
      // player 显示和隐藏
      isShowPlayer: false,

      //歌词页面log控制
      // isPlaying: false,
      //存取歌词内容
      //中文
      lyric: [],
      // 英文
      tlyric: [],
      //滚动列表
      scroller: null,
      currentIndex: 0,

      diffIndex: 4,
    };
  },
  mounted() {},
  computed: {
    ...mapState(["currentSong", "currentTime", "isPlay"]),

    currentLyricIndex() {
      const index = this.lyric.findIndex((item, index) => {
        const nextItem = this.lyric[index + 1];
        if (nextItem) {
          return (
            this.currentTime >= item.time && this.currentTime <= nextItem.time
          );
        } else {
          return this.currentTime >= item.time;
        }
      });
      return index;
    },
  },
  watch: {
    currentLyricIndex(newVal) {
      this.$nextTick(() => {
        const lyricItemNode = this.$refs.lyricItems[newVal + this.diffIndex];
        if (lyricItemNode) {
          lyricItemNode.scrollIntoView({
            behavior: "smooth",
            block: "end",
            inline: "nearest",
          });
        }
      });
    },
    "currentSong.id"(newId, olaId) {
      if (newId !== olaId) {
        this.init();
      }
    },
  },

  methods: {
    ...mapMutations(["setCurrentSong", "setplaystatus"]),
    init() {
      if (this.currentSong.id) {
        this.getlyricsItem();
        this.getPlayLyricsComment();
        // console.log(this.isPlay);
      }

      //////////

      this.$nextTick(() => {
        if (this.scroller) {
          this.scroller.refresh();
        } else {
          this.scroller = new BetterScroll(".lyric-text", {
            mouseWheel: true,
            scrollY: true,
            scrollbar: true,
            probeType: 3,
            disableTouch: true,
          });
        }
      });
    },
    ResourceSwitchingImg() {
      // console.log(1);
      if (this.currentSong.album) {
        return this.currentSong.album.picUrl;
      }
      if (this.currentSong.al) {
        return this.currentSong.al.picUrl;
      }

      return this.currentSong.picUrl;
    },
    getName(arr = []) {
      return arr
        .map((currentSong) => {
          return currentSong.name;
        })
        .join("/");
    },
    ResourceSwitchingName() {
      if (this.currentSong.artists) {
        return this.currentSong.artists;
      }
      if (this.currentSong.ar) {
        return this.currentSong.ar;
      }

      return this.currentSong.song && this.currentSong.song.artists;
    },

    getPlayLyricsComment() {
      fetchPlayLyricsComment({
        id: this.currentSong.id,
        pageSize: 20,
        offset: (this.page - 1) * 20,
      }).then((date) => {
        this.hotComments = date.hotComments;
        this.Comment = date.comments;
        this.Total = date.total;
        // console.log(this.hotComments, this.Comment);
        //console.log(this.lyric);
      });
    },
    async getlyricsItem() {
      const res = await fetchLyric({ id: this.currentSong.id }); // 1480280185

      this.lyric = this.parseLyric(res.lrc.lyric);
      this.tlyric = this.parseLyric(res.tlyric.lyric);

      if (this.tlyric) {
        this.diffIndex = 2;
        this.lyric.forEach((item) => {
          const { time } = item;
          const tCurrent = this.tlyric.find((tItem) => tItem.time === time);
          if (tCurrent) {
            item.content += "__" + tCurrent.content;
          }
        });
      }
    },
    parseLyric(lyricStr) {
      // 分割换行符
      if (lyricStr) {
        const lyricArr = lyricStr.split("\n");

        const result = [];
        const reg = /\[(\S+)\]/;

        lyricArr.forEach((item) => {
          if (!item) return;

          const matchs = item.match(reg);
          if (!matchs) return;

          let content = item.replace(reg, "").trim();
          let timeStr = matchs[1];

          const [minute, second] = timeStr.split(":");
          const time = minute * 60 + Number(second);

          result.push({ time, content });
        });
        //console.log(lyricArr);
        //console.log(result);

        return result;
      }
    },

    getplayListCreateTime(Ms, Format = "yyyy-mm-dd HH:MM:ss") {
      return dateFormat(new Date(Ms), Format);
    },

    change(ye) {
      this.page = ye;
      this.getPlayLyricsComment();
      // console.log(this.page);分页里面
    },
    togglePlayer() {
      this.isShowPlayer = !this.isShowPlayer;
    },
    //歌词页面的
    changePlayState() {
      this.setplaystatus(this.isPlay);
    },
    // 分开歌词时间
  },
};
</script>

<style lang='less' scoped>
.lyrcis {
  position: relative;

  // transition: transform 0.5s;

  // &.show {
  //   transform: translateY(0);
  // }
  // &.hide {
  //   transform: translateY(120%);
  // }

  .Lyrics-interface {
    position: fixed;
    top: 50px;
    right: 0;
    background: white;
    width: 100%;
    height: 612px;
    border: 1px solid rgba(58, 55, 55, 0.1);
    padding: 0 200px;
    overflow: auto;
    z-index: 5;

    .box-box {
      width: 928px;
      margin: 0 auto;
    }
    .paginate {
      float: right;
      margin: 15px 0;
    }
    .Lyrics-interface-top-box {
      height: 445px;
      display: flex;

      // background: burlywood;

      .Lyrics-interface-lyrice {
        position: relative;
        clear: both;
        height: 100%;
        width: 430px;
        // background: salmon;

        .Lyrics-interface-bg {
          position: absolute;
          top: 90px;
          width: 310px;
          height: 310px;
          background: #000;
          border-radius: 50%;
          margin: 0 auto;
          z-index: 2;

          animation: rotate linear infinite 20s;
          animation-play-state: paused;

          .Lyrics-interface-img {
            height: 220px;
            width: 220px;
            position: absolute;
            top: 44px;
            left: 44px;
            border-radius: 50%;
            z-index: 3;
          }
        }
        .Lyrics-interface-bg-write {
          position: absolute;
          top: 75px;
          left: -14px;
          width: 340px;
          height: 340px;
          background: #bebebe;
          border-radius: 50%;
          margin: 0 auto;
          z-index: 1;
        }
        //这是唱片上的log

        &.playing {
          .bar-icon {
            transform: rotate(3deg);
          }

          .Lyrics-interface-bg {
            animation-play-state: running;
          }
        }

        .hand-wrapper {
          position: absolute;
          top: -10px;
          left: 40%;
          width: 30px;
          height: 30px;
          z-index: 5;
          transform: translateX(-50%);
        }
        .hand-icon {
          position: relative;
          z-index: 2;
          width: 100%;
          height: 100%;
        }

        .bar-icon {
          position: absolute;
          z-index: 1;
          top: 15px;
          left: 10px;
          width: 100px;

          transform: rotate(-30deg);
          transform-origin: 0 0;
          transition: transform 0.3s;
        }
      }
      .Lyrics-interface-lyrice-list {
        width: 467px;
        height: 110%;

        margin-left: 30px;
        .Lyrics-interface-lyrice-box {
          position: relative;
          top: 10px;
          left: 0;
          height: 50px;
          margin-left: 10px;
          .Lyrics-interface-lyrice-songs {
            font-size: 25px;
            color: #4a4a4a;
            font-weight: bold;
            padding: 12px 0px;
            > i {
              font-size: 16px;
              padding: 3px 5px;
              border-radius: 3px;
              border: 1px solid #d74d45;
              color: #d74d45;
            }
          }
          .Lyrics-interface-lyrice-sigers {
            font-size: 14px;
            padding: 7px 0px;
            color: #517eaf;
            > span {
              color: #000;
            }
          }
        }
        .Lyrics-interface-lyrice-lists {
          position: relative;
          top: 60px;
          height: 380px;
          width: 100%;
          // background: blanchedalmond;
          overflow: hidden;

          .lyric-text {
            position: relative;
            width: 100%;
            height: 300px;
            margin-top: 30px;
            overflow: hidden;

            mask-image: linear-gradient(
              180deg,
              rgba(255, 255, 255, 0) 0,
              rgba(255, 255, 255, 0.6) 15%,
              #fff 25%,
              #fff 75%,
              rgba(255, 255, 255, 0.6) 85%,
              rgba(255, 255, 255, 0)
            );

            .lyric-item {
              padding-bottom: 18px;
              font-size: 13px;
              color: #666;

              &.active {
                font-weight: bold;
                color: red;
                font-size: 15px;
              }

              > p {
                padding-bottom: 5px;
              }
            }
          }
        }
      }
    }
    .Lyrics-interface-comment {
      width: 100%;
      margin-top: 50px;
      //padding: 0 50px;
      display: flex;
      //background: seagreen;
      min-width: 500px;
      .Playlistdateil-Content-pinglun-item {
        width: 100%;
        height: 100%;
        li {
          display: flex;
        }
        .new-comments-img {
          height: 60px;
          width: 10%;
          // background: rosybrown;
          margin-top: 10px;
          img {
            flex-shrink: 0;
            height: 40px;
            width: 40px;
            border-radius: 50%;
            margin: 10px 5px;
            // position: relative;
            // top: 11px;
          }
        }
        .new-comments-text {
          flex: 1;

          p {
            overflow: hidden;
            display: -webkit-box;
            text-overflow: ellipsis;
            -webkit-line-clamp: 4;
            -webkit-box-orient: vertical;
          }
          font-size: 12px;
          line-height: 1.4;
          border-bottom: 1px solid #bebebe;
          padding: 10px 0;
          .new-comments-text-address-name {
            color: rgba(35, 82, 184, 0.6);
          }
        }
        .new-comments-text-create-time {
          margin: 10px 0px;
          font-size: 12px;
          color: #bebebe;
          .Thumb-up {
            float: right;
            i {
              font-size: 12px;
            }
          }
        }
        .Replyto-comment {
          margin-left: 5px;
          background: #e6e5e6;
          padding: 7px 0;
          border-radius: 3px;

          .text-Replyto-comment-address-name {
            color: rgba(35, 82, 184, 0.6);
          }
        }
      }
    }
  }
}
</style>